<template>
  <div class="c-width c-flex c-dis-flex-row c-hidden dashboard_view_wrap">
    <div class="com_left_width c-height c-dis-flex-col c-hidden">
      <div class="com_box_wrap">
        <div class="com_box_title">
          <p>工程概况</p>
        </div>
        <div class="com_box_cont c-dis-flex-col c-scroll-y">
          <div class="pro_wrap">
            <div><p>项目名称</p><span class="text_overflow">{{proData.data1}}</span></div>
            <div><p>项目类型</p><span class="text_overflow">{{proData.data2}}</span></div>
            <div><p>设计单位</p><span class="text_overflow">{{proData.data3}}</span></div>
            <div><p>监理单位</p><span class="text_overflow">{{proData.data4}}</span></div>
            <div><p>项目地址</p><span class="text_overflow">{{proData.data5}}</span></div>
            <div><p>开始时间</p><span class="text_overflow">{{proData.data6}}</span></div>
            <div><p>技术竣工时间</p><span class="text_overflow">{{proData.data7}}</span></div>
          </div>
        </div>
      </div>
      <div class="com_box_wrap com-margin-top com-margin-bottom">
        <div class="com_box_title">
          <p>人员管理</p>
        </div>
        <div class="com_box_cont c-dis-flex-col c-hidden">
          <div class="person_wrap c-flex c-hidden">
            <div class="person_left">
              <div class="items">
                <img src="@/assets/images/dashboard/r_icon_1.png"/>
                <p>
                  <span>进站人员</span>
                  <span class="i_value">{{ personData.data1 }}人</span>
                </p>
              </div>
              <div class="items">
                <img src="@/assets/images/dashboard/r_icon_2.png"/>
                <p>
                  <span>出站人员</span>
                  <span class="i_value i_value_1">{{ personData.data1 }}人</span>
                </p>
              </div>
            </div>
            <div class="person_right c-height c-dis-flex-col c-hidden">

              <div class="per_table_thead">
                <span>姓名</span>
                <span>状态</span>
                <span>体温</span>
              </div>
              <div class="per_table_tbody c-flex c-dis-flex-col c-scroll-y">
                <div class="c-width c-flex">
                  <div class="item" v-for="(item,i) in personList" :key="i" :class="{act:item.status == 1}">
                    <p>{{item.name}}</p>
                    <p>
                      <span v-if="item.status == 0">进站</span>
                      <span v-else>出站</span>
                    </p>
                    <p>{{item.data}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="com_box_wrap box_height">
        <div class="com_box_title">
          <p>物资统计</p>
        </div>
        <div class="com_box_cont">
          <PieChart :chart-data="chartData2"></PieChart>
        </div>
      </div>
    </div>
    <div class="c-flex c-height c-dis-flex-col c-hidden com-margin-left com-margin-right">
      <div class="device_total_wrap">
        <div class="items" v-for="(item,i) in deviceData" :key="i">
          <div class="i_img">
            <el-image class="img" :src="getImgUrl(item.icon)"></el-image>
          </div>
          <div class="i_list i_list_1" v-if="item.type == 0">
            <p class="value1"><span>{{item.value}}</span><span>设备总数</span></p>
          </div>
          <div class="i_list i_list_2" v-else>
            <p class="value"><span>{{item.value}}</span><span>在线</span></p>
            <div class="line"></div>
            <p class="value1"><span>{{item.value1}}</span><span>离线</span></p>
          </div>
        </div>
      </div>
      <div class="com_box_wrap com-margin-top com-margin-bottom">
        <div class="com_box_title">
          <p>塔吊监测</p>
          <span class="text_overflow">最新更新时间：2022-12-06 20:04:39</span>
        </div>
        <div class="com_box_cont">
          <div class="tower_wrap c-height c-dis-flex-row c-hidden">
            <div class="tower_left c-hidden">
              <div class="tower_img">
                <el-image class="img" fit="cover" :src="getImgUrl('tower')"></el-image>
              </div>
              <div class="tower_list">
                <p v-for="(item,i) in towerData" :key="i">
                  <span> {{item.name}}:</span>
                  <span> {{item.value}}{{item.unit}}</span>
                </p>
              </div>
            </div>
            <div class="tower_right c-flex c-height c-hidden">
              <div class="tower_img">
                <el-image class="img" :src="getImgUrl('tower_1')"></el-image>
              </div>
              <div class="tower_text">
                <p>监控位置：现场大门</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="com_box_wrap box_height">
        <div class="com_box_title">
          <p>工程进度</p>
        </div>
        <div class="com_box_cont">
          <div class="progress_wrap c-height c-hidden c-dis-flex-col">
            <div class="progress_list c-hidden">
              <div v-for="(item,i) in progressList" :key="i">
                <span>{{item.name}}</span>
                <p>{{item.value}}{{item.unit}}</p>
              </div>
            </div>
            <div class="progress_cont c-flex c-hidden">
              <div class="item" v-for="(item,i) in progressData" :key="i">
                <p class="name" :class="{name_a:item.status == 1}">{{item.name}}</p>
                <span class="pro_i" :class="{pro_a:item.status == 1}"></span>
                <p class="value">
                  <span>开始：{{item.start}}</span>
                  <span>结束：{{item.end}}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="com_left_width c-height c-dis-flex-col c-hidden">
      <div class="com_box_wrap">
        <div class="com_box_title">
          <p>天气情况</p>
        </div>
        <div class="com_box_cont">
          <div class="weather_wrap c-height c-hidden">
            <div class="weather_top">
              <div class="item_1">18.7°C</div>
              <div class="item_2">
                <p class="item_2_1 text_overflow">最新更新时间：2022-12-06 20:04:39</p>
                <div class="item_2_2">
                  <p>小雨转阴</p>
                  <p><span>轻度污染</span><span>东北风 / 2级</span></p>
                </div>
              </div>
            </div>
            <div class="weather_bottom">
              <div class="items" v-for="(item,i) in weatherList" :key="i">
                <p class="value"><span>{{item.value}}</span><span>{{item.unit}}</span></p>
                <p class="name">{{item.name}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="com_box_wrap com-margin-top com-margin-bottom">
        <div class="com_box_title">
          <p>车辆管理</p>
        </div>
        <div class="com_box_cont">
          <LineChart :chart-data="chartData1"></LineChart>
        </div>
      </div>
      <div class="com_box_wrap box_height">
        <div class="com_box_title">
          <p>安全质量检查</p>
        </div>
        <div class="com_box_cont">

          <div class="safety_wrap c-height c-dis-flex-row c-hidden">
            <div class="safety_left">
              <div class="item_1" v-for="(item,i) in safetyList1" :key="i">
                <span>{{item.name}}</span>
                <span :class="'i_'+i">{{item.value}}</span>
              </div>
              <div class="tit">安全检查</div>
            </div>
            <div class="safety_right">
              <div class="item_2" v-for="(item,i) in safetyList2" :key="i">
                <span>{{item.name}}</span>
                <span :class="'i_'+i">{{item.value}}</span>
              </div>
              <div class="tit">质量检查</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {randomNum} from "@/utils/index.js";
import LineChart from "@/components/Chart/LineChart";
import PieChart from "@/components/Chart/PieChart";
export default {
  components: {
    LineChart,
    PieChart
  },
  data() {
    return {
      proData:{
        data1:'新能源场站',
        data2:'换流站',
        data3:'XXXXXXX单位',
        data4:'XXXXX单位',
        data5:'山东省德州市XXXXX-XXXXXXXX',
        data6:'2022-10-20',
        data7:'2023-10-01',
      },
      personData:{
        data1:randomNum(20,30)
      },
      personList:[
        {name:'李立倩',status:0,data:'36.5℃'},
        {name:'李立倩',status:0,data:'36.5℃'},
        {name:'李立倩',status:1,data:'36.5℃'},
        {name:'李立倩',status:1,data:'36.5℃'},
        {name:'李立倩',status:0,data:'36.5℃'},
        {name:'李立倩',status:1,data:'36.5℃'},
        {name:'李立倩',status:0,data:'36.5℃'},
        {name:'李立倩',status:0,data:'36.5℃'},
      ],
      deviceData:[
        {name:'总数',type:0,icon:'i_sxt',value:108},
        {name:'摄像头',icon:'i_sxt2',value:randomNum(1,30),value1:randomNum(1,30)},
        {name:'塔吊',icon:'i_sxt3',value:randomNum(1,30),value1:randomNum(1,30)},
        {name:'升降机',icon:'i_sxt4',value:randomNum(1,30),value1:randomNum(1,30)},
      ],
      towerData:[
        {name:'塔身高度',value:0,unit:'m'},
        {name:'前臂长度',value:0,unit:'m'},
        {name:'后臂长度',value:0,unit:'m'},
        {name:'实际吊重',value:0,unit:'t'},
        {name:'吊钩高度',value:0,unit:'m'},
        {name:'回转',value:0,unit:'°'},
        {name:'小车幅度',value:0,unit:'m'},
        {name:'风速',value:0,unit:'m/s'},
        {name:'垂直倾角',value:0,unit:'°'},
        {name:'水平倾角',value:0,unit:'°'},
      ],
      weatherList:[
        {name:'温度',value:0,unit:'℃'},
        {name:'湿度',value:0,unit:'RH'},
        {name:'风级',value:0,unit:'级'},
        {name:'雨量',value:0,unit:'mm/h'},
        {name:'气压',value:0,unit:'hpa'},
        {name:'风向',value:0,unit:'°'},
      ],
      safetyList1:[
        {name:'已整改',value:randomNum(1,30)},
        {name:'未整改',value:randomNum(1,30)},
        {name:'已销项',value:randomNum(1,30)},
      ],
      safetyList2:[
        {name:'已整改',value:randomNum(1,30)},
        {name:'未整改',value:randomNum(1,30)},
        {name:'已销项',value:randomNum(1,30)},
      ],
      progressList:[
        {name:'已施工',value:0,unit:'天'},
        {name:'总工期',value:280,unit:'天'},
        {name:'开始时间',value:'2022-10-01',unit:''},
        {name:'计划竣工时间',value:'2023-10-31',unit:''},
      ],
      progressData:[
        {name:'桩基工程',status:1,start:'2022-10-01',end:'2022-11-25'},
        {name:'桩基工程',status:1,start:'2022-10-01',end:'2022-11-25'},
        {name:'桩基工程',status:1,start:'2022-10-01',end:'--'},
        {name:'桩基工程',status:0,start:'--',end:'--'},
        {name:'桩基工程',status:0,start:'--',end:''},
      ],
      chartData1:{
        unit:'人数',
        color:['rgba(53,210,255, 1)','rgba(255, 181, 36,1)'],
        colorBg:[
          ['rgba(53,210,255,0.45)','rgba(188,233,166,0)'],
          ['rgba(255, 181, 36,0.8)','rgba(188,233,166,0)'],
        ],
        legend:['进站','出站'],
        xAxis:['10-01','10-02','10-03','10-04','10-05','10-06','10-07'],
        series:[
          [randomNum(10,100),randomNum(20,100),randomNum(30,100),randomNum(30,100),randomNum(20,100),randomNum(30,100),randomNum(30,100)],
          [randomNum(10,90),randomNum(20,90),randomNum(30,90),randomNum(30,90),randomNum(20,90),randomNum(30,90),randomNum(30,90)],
        ]
      },
      chartData2:{
        name:'总数',
        color:['#e27b22','#168dd8','#45b43c','#f0b528','#1fcef0'],
        data:[
          {name:'未生产',value:randomNum(1,30)},
          {name:'已生产',value:randomNum(1,30)},
          {name:'已试验',value:randomNum(1,30)},
          {name:'未出厂',value:randomNum(1,30)},
          {name:'已安装',value:randomNum(1,30)},
        ]
      }
    };
  },
  methods: {
    //获取图片地址
    getImgUrl (img) {
      return require("@/assets/images/dashboard/" + img+ ".png");
    },
  },
};
</script>

<style lang="scss" scoped>
.box_height{
  flex: none;
  height: 14.5833vw;
}
</style>

